<template>
  <NuxtLayout>
    <div class="main-container">
      <div class="goods-info">
        <div class="info-title">您购买的商品是</div>
        <common-goods v-if="orderModel.goodsType === '1'" :goods-type="1" :goods-info="examInfo" />
        <el-divider />
        <el-form ref="formRef" :model="orderModel">
          <!-- 支付方式 -->
          <div class="pay-type">
            <div class="type-title">支付方式</div>
            <el-form-item label="" prop="payType">
              <el-radio-group v-model="orderModel.payType" @change="handlePayTypeChange">
                <el-radio v-for="(item, index) in payTypeList" :key="index" :value="item.code">
                  <img v-if="item.code === 1" src="~/assets/image/pay_wx.png" alt="wx" />
                  <img v-if="item.code === 6" src="~/assets/image/pay_ali.png" alt="ali" />
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-divider />
            <div class="type-title">客户备注</div>
            <el-form-item label="" prop="payType">
              <el-input v-model="orderModel.remarkCus" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-form>
        <!-- 下单按钮 -->
        <el-affix position="bottom">
          <div class="foot-bottom">
            <div>订单金额：￥{{ orderModel.price }}</div>
            <el-button v-loading="loading" type="danger" size="large" @click="handleOrder">立即支付</el-button>
          </div>
        </el-affix>
      </div>
    </div>
    <common-pay v-if="visiblePay" :visible="visiblePay" :order-info="orderModel" @close="handleClose" />
  </NuxtLayout>
</template>
<script setup>
  import { examApi } from '~/api/exam'
  import { payTypeList } from '~/utils/constants'
  import { orderApi } from '~/api/order'
  const router = useRouter()
  const route = useRoute()
  const visiblePay = ref(false)
  const examInfo = reactive({})

  // 支付方式切换
  const handlePayTypeChange = async (val) => {}

  // 订单信息
  const orderModel = reactive({
    goodsType: route.query.goodsType,
    goodsId: route.query.goodsId,
    orderNo: route.query.orderNo,
    orderSource: 1, // 订单来源(1:PC端、2:H5、3:小程序、4:APP)
    payType: 1, // 支付类型(1：微信扫码、2：微信H5、3：微信APP、4：小程序支付、5：微信JSAPI、6：支付宝扫码、7：支付宝H5、8：支付宝APP、9：余额支付)
    remarkCus: ''
  })

  // 下单
  const loading = ref(false)
  const handleOrder = async () => {
    if (loading.value === true) {
      ElMessage.warning('正在处理...')
      return
    }

    if (orderModel.payType === 9 && availableAmount.value < orderModel.price) {
      ElMessage.warning('当前余额不足，请更换其他支付方式')
      return
    }

    loading.value = true
    try {
      let res
      if (orderModel.orderNo) {
        // 继续支付
        res = await orderApi.continuePay(orderModel)
      } else {
        // 下单
        res = await orderApi.createOrder(orderModel)
      }
      Object.assign(orderModel, res)
      visiblePay.value = true
    } finally {
      loading.value = false
    }
  }

  // 关闭支付弹窗
  const handleClose = (orderStatus) => {
    visiblePay.value = false
    // 根据状态跳转 orderStatus: 2成功，3失败
    if (orderStatus === 2) {
      if (orderModel.goodsType === '1') {
        router.push({ name: 'exam-detail', query: { id: orderModel.goodsId } })
      }
      return
    }
    if (orderStatus === 3) {
      ElMessage.warning('支付失败，请重试')
    }
  }

  onMounted(async () => {
    // 获取商品信息
    if (orderModel.goodsType === '1') {
      // 考试
      const res = await examApi.examDetail({ id: route.query.goodsId })
      Object.assign(examInfo, res)
      orderModel.price = res.price
    }
  })

  useHead({
    title: '收银台'
  })
</script>
<style lang="scss" scoped>
  .goods-info {
    background-color: #fff;
    padding: 50px;
    margin: 20px auto;
    border-radius: 5px;
    font-size: 20px;
    .info-title {
      margin-bottom: 20px;
    }
    .info-content {
      margin: 20px auto;
      font-size: 18px;
      line-height: 35px;
      display: flex;
      justify-content: flex-start;
      .el-image {
        width: 200px;
        margin-right: 20px;
      }
      .price {
        font-size: 16px;
        span {
          color: #777;
          margin-right: 20px;
        }
      }
    }
  }

  .pay-type {
    .type-title {
      margin-bottom: 20px;
    }
    img {
      width: 125px;
    }
    .ye {
      color: blue;
    }
  }

  .foot-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
    border-radius: 5px;
    background-color: #fff;
  }

  :deep(.el-divider) {
    margin: 40px 0 30px 0 !important;
  }
</style>
